<template>
    <div class="admin-data" ref="adminData">
        <div class="demo-spin-container" v-show="loading">
            <Spin size="large" fix></Spin>
        </div>
        <div v-for="(iten, num) in data" :key="num" :style="{marginTop: num !== 0 ? '10px' : '0px'}">
            <table class="dutyadmindata-table" border="1" cellspacing="0" style="margin-bottom: 10px">
                <thead class="table-head">
                    <tr>
                        <th>值班领导</th>
                        <th>环节干部</th>
                        <th>值班时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ iten.leader_name.zh }}</td>
                        <td><p v-for="(item,ind) in iten.cadredata" :key="ind" >{{ item.cadredata !=null?item.cadredata.teacher_name.zh:'' }}</p></td>
                        
                        <td>{{ iten.created_at }}</td>
                    </tr>
                </tbody>
            </table>
            <table class="dutyadmindata-table" border="1" cellspacing="0">
                <thead class="table-head">
                    <tr>
                        <th>值班项</th>
                        <th>值班检查项</th>
                        <th>情况说明</th>
                        <th>反馈状态</th>
                        <th>反馈内容</th>
                        <th>现场资料</th>
                    </tr>
                </thead>
                <tbody v-for="(item, index) in iten.data" :key="index">
                    <tr v-for="(w, q) in item.admininspectterm" :key="q">
                        <td v-if="q === 0" class="table-item1" :rowspan="item.admininspectterm.length"> {{ item.administrativeduty_name.zh }} </td>
                        <td class="table-item2">
                            {{ w.administrativeduty_name.zh }}
                        </td>
                        <td>
                            {{ w.explain?w.explain.zh:'' }}
                        </td>
                        <td>
                            {{ w.feedback === 1 ? '未反馈' : '已反馈' }}
                        </td>
                        <td>
                             {{ w.feedback_name?w.feedback_name.zh:'' }}
                        </td>
                        <td>
                            <img v-if="w.img" :src="w.img" @click="checkImg(w.img, item.administrativeduty_name.zh, w.administrativeduty_name.zh)" style="width:50px;height:50px;">
                        </td>
                    </tr>
                </tbody>
            </table>
            <Modal v-model="dataModal" @on-ok="src = ''">
                <div slot="header">
                    <Breadcrumb>
                        <BreadcrumbItem>{{ topTitle }}</BreadcrumbItem>
                        <BreadcrumbItem>{{ butTitle }}</BreadcrumbItem>
                    </Breadcrumb>
                </div>
                <div class="demo-carousel" style="width:100%">
                    <img v-if="src != ''" :src="src" width="100%" height="200px">
                </div>
            </Modal>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            antime: null,
            entime: null,
            data: [],
            allurl: 'api/watchlist/v1/admininspecttermdata/batchprinting'
        }
    },
    methods: {
        /************************************************************
         * 
         * 查看现场资料         
         * 
         ************************************************************/
        checkImg (value, a, b) {
            this.topTitle = a
            this.butTitle = b
            this.src = value
            
            this.dataModal = true
        },
        reloadData (date) {
            this.loading = true
            this.data = []
            if (!date) {
                this.antime = null
                this.entime = null
                this.queryData ()
            } else {
                this.antime = date[0]
                this.entime = date[1]
                this.queryData ()
            }
        },
        
        /************************************************************
         * 
         * 查询数据         
         * 
         ************************************************************/
        queryData () {
            let params = {
                antime: this.antime,
                entime: this.entime
            }
            this.$http.get(this.allurl, { params }).then(val=>{
                this.data = val.data
                this.loading = false
            }).catch(err => {
                this.loading = false
            })
        }
    },
    created () {
        this.reloadData (false)
    },
}
</script>
<style lang="less">
.admin-data {
    height: 100%;
    .ivu-table-cell {
        padding: 0;
    }
    
    .dutyadmindata-table {
        width: 100%;
        color: #515a6e;
        text-align: center;
        border: 1px solid #e8eaec!important;
        td, th {
            padding: 10px;
            border: 1px solid #e8eaec!important;
        }
        .table-head {
            background-color: #f8f8f8;
        }
        .table-item1 {
            max-width: 200px;
        }
        .table-item2 {
            max-width: 400px;
        }
    }
    .demo-spin-container {
    	display: inline-block;
        width: 100%;
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
}
</style>
